<template>
  <div class="center">
    <el-card shadow="never" class="!border-none">
      <div class="flex items-center">
        <div
          class="h-4 border-l-4"
          style="border-color: rgb(49, 87, 242)"
        ></div>
        <div class="ml-2 title">经营概况</div>
      </div>

      <el-scrollbar>
        <div class="ml-4 mt-6 pb-6 flex flex-wrap">
          <div
            class="flex sm:flex-1"
            v-for="(item, index) in data"
            :key="index"
          >
            <div class="w-[66px] h-[66px] mr-2 mt-5 sm:mt-0">
              <img :src="item.img" />
            </div>
            <div class="flex flex-col mt-5 sm:mt-0">
              <div class="amount">{{ item.amount }}</div>
              <div class="flex">
                <div class="text">{{ item.desc }}</div>
                <div class="w-[16px] h-[16px]">
                  <el-tooltip
                    :content="`${item.tips}`"
                    placement="bottom"
                    effect="dark"
                  >
                    <img src="@/assets/images/finance_center/yiwen.png" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
    <el-card shadow="never" class="!border-none my-4">
      <el-form class="ls-form" :model="formData" inline>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="formData.startTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择月"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="formData.endTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择月"
          />
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <el-button type="primary" @click="getCenterData">查询</el-button>
            <el-button @click="resetParams">重置</el-button>
            <el-button @click="exportFrom" type="warning">导出</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {
  getFinanceCenter,
  postconditionStatisticsFinance,
  getdownloadFinance,
} from "@/api/finance/center";
import total_amount from "@/assets/images/finance_center/total_amount.png";
import total_order from "@/assets/images/finance_center/total_order.png";
import total_refund_amount from "@/assets/images/finance_center/total_refund_amount.png";
import wait_refund_amount from "@/assets/images/finance_center/wait_refund_amount.png";
import DataPicker from "@/components/daterange-picker/index.vue";
import { reactive } from "vue";
import axios, { type ResponseType } from "axios";

const data = ref<any>([
  {
    amount: "",
    img: total_amount,
    desc: "累计营业额（元）",
    tips: "成交订单的金额，无论订单是否取消，只要支付过就算营业额",
  },
  {
    amount: "",
    img: total_order,
    desc: "累计成交订单（笔）",
    tips: "已付款就算成交订单数",
  },
  {
    amount: "",
    img: total_refund_amount,
    desc: "已退款金额（元）",
    tips: "退款记录里面已退款成功的金额",
  },
  {
    amount: "",
    img: wait_refund_amount,
    desc: "待退款金额（元）",
    tips: "退款记录里面退款中和退款失败的金额",
  },
]);
const baseUrl = reactive(`${import.meta.env.VITE_APP_BASE_URL || ""}/`);

function getDateNDaysAgo(n: number) {
  const date = new Date();
  date.setDate(date.getDate() + n);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-based
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}
const formData = reactive<any>({
  startTime: getDateNDaysAgo(-1000),
  endTime: getDateNDaysAgo(0),
});
// 重置
const resetParams = async () => {
  formData.startTime = getDateNDaysAgo(-7);
  formData.endTime = getDateNDaysAgo(0);
  getstatistics();
};

// 导出
const exportFrom = async () => {
  const a = document.createElement("a");
  a.href =
    baseUrl +
    "api/finance/downloadFinance?startTime=" +
    formData.startTime +
    "&endTime=" +
    formData.endTime;
  a.download =
    "金额记录表-" + formData.startTime + " ~ " + formData.endTime + ".xls"; // 这里设置下载文件的名称

  a.click();

  //   await getdownloadFinance({
  //     startTime: formData.startTime,
  //     endTime: formData.endTime,
  //   }).then((res) => {
  //     console.log(res, "ressssssssssssssss");
  //     const blob = new Blob(res, {
  //       type: "application/vnd.ms-excel;",
  //     });

  //     // 创建一个 URL 对象
  //     const url = window.URL.createObjectURL(blob);

  //     const a = document.createElement("a");

  //     a.href = url;
  //     a.download =
  //       "金额记录表-" + formData.startTime + " ~ " + formData.endTime + ".xls"; // 这里设置下载文件的名称

  //     a.click();
  //   });
};

// 查询
const getCenterData = async () => {
  const i = ref(0);
  const res = await postconditionStatisticsFinance({
    startTime: formData.startTime,
    endTime: formData.endTime,
  });
  for (const key in res) {
    data.value[i.value].amount = res[key];
    i.value++;
  }
};

const getstatistics = async () => {
  const i = ref(0);
  const res = await getFinanceCenter("");
  for (const key in res) {
    data.value[i.value].amount = res[key];
    i.value++;
  }
};

getstatistics();
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
}

.amount {
  font-family: "PingFang HK";
  font-weight: 400;
  font-size: 32px;
  text-align: left;
  color: #333;
}

.text {
  font-family: "PingFang HK";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #666;
}
</style>
